<template>
  <div style="height:100%;overflow:hidden">
    <title-bar titleText="我的钱包" />

    <has-opened-module
      v-if="showHasOpenedModule"
      :state="state"
      :balance="balance"
    />
    <not-opened-module v-else-if="showNotOpenedModule" />
  </div>
</template>

<script>
import { TitleBar } from 'vue-xb-ui-depot'
import NotOpenedModule from './components/NotOpenedModule'
import HasOpenedModule from './components/HasOpenedModule'
import { getWalletBalance } from './api/api.js'
import { CARD_STATE_NOT_OPEND, CARD_STATE_FROZEN } from './constants/CardState.js'

export default {
  name: 'App',
  components: {
    'title-bar': TitleBar,
    'not-opened-module': NotOpenedModule,
    'has-opened-module': HasOpenedModule
  },
  data() {
    return {
      // 为了使得不同状态的模块针对v-if v-else-if不出现闪现的问题
      state: -2,
      balance: '0.00'
    }
  },
  computed: {
    showHasOpenedModule() {
      // 已开通或者已冻结的状态
      return this.state !== CARD_STATE_NOT_OPEND
    },
    showNotOpenedModule() {
      // 未开通的状态
      return this.state === CARD_STATE_NOT_OPEND
    },
    isFrozen() {
      return this.state === CARD_STATE_FROZEN
    }
  },
  mounted() {
    this._checkBusCardState()
  },
  methods: {
    _checkBusCardState: async function () {
      try {
        let rs = await getWalletBalance()
        this.state = rs[0]
        this.balance = rs[1]
      } catch (err) {
      }
    }
  }
}
</script>

<style>
html,
body {
  height: 100%;
}

.title-bar-wrapper {
  color: #fff;
  background: linear-gradient(
    111deg,
    rgba(25, 126, 253, 1) 0%,
    rgba(34, 164, 254, 1) 100%,
    rgba(40, 172, 255, 1) 100%
  );
}
</style>
